<template>
  <div class="home">
    <div class="one">{{ name }}</div>
    <div class="one">{{ age }}</div>
    <div class="one">{{ sex }}</div>
  </div>
  <div>一辆{{ car.brand }}，价值{{ car.price }}万
    <ul v-for="item in games" :key="item.id">{{ item.name }}</ul>
  </div>
  <el-button type="primary" @click="changeName">测试</el-button>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';

let name = ref('zhangsan');
let age = ref(18);
let sex = ref('男');

//方法
function changeName() {
  name.value = 'zhang_san';
  age.value = 20;
  sex.value = '女';
  sum();
}
/*
 * ref 对象 
 * proxy 函数 
 * 使用原则 ：
 * 如果需要一个基本数据类型，必须使用ref
 * 如果需要响应式对象，层级不深：ref、reactive
 * 如果需要响应式对象，且层级较深，推荐使用reactive
 * 按住Alt 可以选中多个
*/
let car = reactive({
  brand: '奔驰',
  price: 100,
})
let games = reactive(
  [
    { id: 'mkkj1', name: "王者荣耀0" },
    { id: 'mkkj2', name: "流星蝴蝶1" },
    { id: 'mkkj3', name: "王者荣耀2" },
    { id: 'mkkj4', name: "王者荣耀3" },
  ]
)
let obj1 = reactive(
  [
    {id:'name1',name:'ddff1'},
    {id:'name2',name:'ddff2'},
    {id:'name3',name:'ddff3'},
    {id:'name4',name:'ddff4'},
    {id:'name5',name:'ddff5'},
  ]
)
function sum() {
  Object.assign(games,obj1)
}
</script>
<style scoped lang="less">
.home {
  display: flex;

  .one {
    height: 100px;
    width: 100px;
    background-color: red;
    margin: 0 10px;
  }
}
</style>